import { Button, Card, Form, Input, Select, Space } from 'antd'
// import { Option } from 'antd/lib/mentions'
import Table, { ColumnsType } from "antd/lib/table";
import React, { useEffect, useState } from 'react'
import { FileSearchOutlined } from '@ant-design/icons'
import { CityType, GetHospitalListTpye, PageType, ProvinceItem, SearchParams } from './type';
import { GetCityList, GetHospitalListData, GetProvinceList, } from './adress';
import { FromFileType, HospitalSetItem } from '@/api/hospital/hospitalSet/type';

import { Link, useNavigate } from 'react-router-dom';

//获取Option
const { Option } = Select;
export default function HosptialList() {
  // 获取nav
  let navigate = useNavigate()
  // 设置省份的状态
  let [province, Setprovince] = useState<ProvinceItem[]>([])
  // 设置城市的状态
  let [city, Setcity] = useState<CityType[]>([])
  // 设置县的状态
  let [county, Setcounty] = useState<CityType[]>([])
  // 设置获取医院列表的状态
  let [hospitalListData, SethospitalListData] = useState<GetHospitalListTpye>({})
  // 声明from表单
  let [from] = Form.useForm()
  // 设置查询页码
  let [pagedata, Setpagedata] = useState<PageType>({ page: 1, limit: 5 })
  // 设置loading效果的状态
  let [IsLoading, SetIsLoading] = useState(false)
  // 设置选择医院搜索的状态
  let [serach, Setserach] = useState<SearchParams>({
    hoscode: undefined,
    hosname: undefined,
    hostype: undefined,
    provinceCode: undefined,
    cityCode: undefined,
    districtCode: undefined,
    status: undefined,
  })
  // 在useEffect中挂在时初次渲染
  useEffect(() => {
    let getData = async () => {
      // 设置loading效果为true
      SetIsLoading(true)
      // 发请求 获取省份数据
      let result = await GetProvinceList()
      // 更新省份数据状态
      Setprovince(result)
      // 调用获取医院列表的函数
      getDataList()
      // 设置loading为fasle
      SetIsLoading(false)
    }
    // 调用函数 获取医院列表初始化数据
    getData()

  }, [pagedata])

  // 声明 onfinsh 函数
  let onFinish = async (values: SearchParams) => {
    // 发送ajax请求
    Setserach(values)

  }
  // 声明 reset 函数
  let reset = () => { }

  // 单条数据的结构
  interface HospitalListItem {
    /**
     * id
     */
    id: string;
    /**
     * 创建时间
     */
    createTime: string;
    /**
     * 更新时间
     */
    updateTime: string;
    /**
     * 是否删除
     */
    isDeleted: number;
    /**
     * 医院的参数
     */
    param: Param;
    /**
     * 医院编号
     */
    hoscode: string;
    /**
     * 医院名称
     */
    hosname: string;
    /**
     * 医院类型
     */
    hostype: string;
    /**
     * 省份编号
     */
    provinceCode: string;
    /**
     * 城市编号
     */
    cityCode: string;
    /**
     * 区域编号
     */
    districtCode: string;
    /**
     * 地址
     */
    address: string;
    /**
     * logo
     */
    logoData: string;
    /**
     * 医院介绍
     */
    intro: string;
    /**
     * 乘车路线
     */
    route: string;
    /**
     * 状态
     */
    status: number;
    /**
     * 预约规则
     */
    bookingRule: BookingRule;
  }

  interface BookingRule {
    /**
     * 预约周期
     */
    cycle: number;
    /**
     * 放号时间
     */
    releaseTime: string;
    /**
     * 停止时间
     */
    stopTime: string;
    /**
     * 退号日期
     */
    quitDay: number;
    /**
     * 退号时间
     */
    quitTime: string;
    /**
     * 预约规则
     */
    rule: string[];
  }

  interface Param {
    /**
     * 医院类型字符串
     */
    hostypeString: string;
    /**
     * 医院地址
     */
    fullAddress: string;
  }
  // 表格结构
  let columns: ColumnsType<HospitalListItem> = [
    {
      title: '序号',
      render: (_, record, index) => index + 1
    },
    {
      title: '医院logo',
      dataIndex: 'logoData',
      render: (value) => {
        return <img width={70} src={'data:image/png;base64,' + value} alt="" />
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院等级',
      render: (_, record) => {
        return record.param.hostypeString
      }
    },
    {
      title: '详细地址',
      render: (_, record) => {
        return record.param.fullAddress
      }
    },
    {
      title: '状态',
      render: status => status ? '已上线' : '未上线'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      render: (_, record) => {
        return <Space>
          <Button type="primary">查看</Button>
          <Button type="primary" onClick={() => {
            navigate(`/syt/hospital/hospitalList/schedule`, { state: record.hoscode })
          }} >排班</Button>
          <Button type="primary">下线</Button>
        </Space>
      }
    }
  ]
  //准备数据(测试使用)

  //获取省份id的点击事件
  let getprovinceid = async (value: number) => {
    // Setcity([])
    let result = await GetCityList(value)
    console.log(result);
    Setcity(result)
  }
  // 获取城市的id的点击事件
  let getCityid = async (value: number) => {
    let result = await GetCityList(value)
    Setcounty(result)
  }

  // 获取医院列表数据
  let getDataList = async () => {
    let result = await GetHospitalListData(pagedata)
    // 更新医院列表的数据
    SethospitalListData(result)
  }

  // 声明医院类型回调的函数
  let onChangeHosType = async (data: GetHospitalListTpye) => {
    // let res = await HospitalType(data)
    // console.log(res);

    // SetchooseHosType(chooseHosType)
  }

  return (
    <Card>
      {/* 表单部分 */
        <Form
          form={from}
          name="basic"
          onFinish={onFinish}
          autoComplete="off"
          layout="inline"
        >
          <Form.Item name="province" style={{ width: 200, marginBottom: 20 }}>
            <Select placeholder="请选择省" onChange={getprovinceid} allowClear>
              {
                province.map((item) => {
                  return <Option key={item.id} value={item.id}>{item.name}</Option>
                })
              }

            </Select>
          </Form.Item>
          <Form.Item name="city" style={{ width: 200 }}>
            <Select placeholder="请选择市" onChange={getCityid} allowClear>
              {
                city.map((item) => {
                  return <Option key={item.id} value={item.id}>{item.name}</Option>
                })
              }

            </Select>
          </Form.Item>
          <Form.Item name="county" style={{ width: 200 }}>
            <Select placeholder="请选择区" onChange={() => { }} allowClear>
              {
                county.map((item) => {
                  return <Option key={item.id} value={item.id}>{item.name}</Option>
                })
              }
            </Select>
          </Form.Item>

          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>
          <Form.Item name="hostype" style={{ width: 200 }}>
            <Select placeholder="医院类型" onChange={onChangeHosType} allowClear>
              <Option value="三级甲等">三级甲等</Option>
              <Option value="三级乙等">三级乙等</Option>
              <Option value="二级甲等">二级甲等</Option>
              <Option value="二级乙等">二级乙等</Option>
              <Option value="一级">一级</Option>
            </Select>
          </Form.Item>

          <Form.Item name="status" style={{ width: 200 }}>
            <Select placeholder="医院状态" onChange={() => { }} allowClear>
              <Option value={1}>已上线</Option>
              <Option value={0}>未上线</Option>
            </Select>
          </Form.Item>

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" icon={<FileSearchOutlined />}>
                查询
              </Button>

              <Button onClick={reset}>清空</Button>
            </Space>
          </Form.Item>
        </Form>
      }
      {/* 表格部分 */}
      <Table
        columns={columns}
        dataSource={hospitalListData.content}
        bordered
        loading={IsLoading}
        rowKey={'id'}
        pagination={{
          // 总页数
          total: hospitalListData.totalElements,
          // 一页多少条数据
          pageSize: hospitalListData.size,
          // 当前在第几个
          current: pagedata.page,
          showSizeChanger: true,
          pageSizeOptions: [5, 10, 15, 20],
          showQuickJumper: true,
          showTotal: total => {
            return `总计 :  ${total} 条 `;
          },
          // 当点击分页时,函数会调用
          onChange: (page: number, pageSize: number) => {
            // console.log(page, pageSize);
            let newpagedata: PageType = { page, limit: pageSize }
            Setpagedata(newpagedata)
          }
        }}
      />
    </Card >
  )
}
